<template>

	<div class="box">
		<input type="checkbox" id="check" class="switch" @click="checkoutEvent" :checked='checked'>
		<span style="position: absolute;left: 100px;font-size: 1.3em;color: #fff;">注册</span>
		<span style="position: absolute;right: 100px;font-size: 1.3em;color: #fff;">登录</span>
	</div>
</template>

<script>
	export default {
		name: "switchinput",
		data() {
			return {

			}
		},
		props: {
			checked: {
				type: Boolean,
				require: true, //声明是否必须
				default: true //默认值

			}
		},
		methods: {
			checkoutEvent() {
				if (check.checked) {
					this.$router.push("/sign")
				} else {
					this.$router.push("/")
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.box {
		perspective: 888px;
		width: 400px;
		height: auto;
		position: fixed;
		z-index: 999;
		top: 100px;
		left: calc((100% - 400px) / 2);

		input[type="checkbox"].switch {
			font-size: 30px;
			appearance: none;
			width: 2.5em;
			height: 1em;
			background: #0ebeff;
			border-radius: 1em;
			position: relative;
			left: 162px;
			cursor: pointer;
			outline: none;
			transition: all .2s ease-in-out;
		}

		input[type="checkbox"].switch:checked {
			background: rgb(33, 219, 179);
		}

		input[type="checkbox"].switch::before {
			position: absolute;
			content: "";
			width: 1em;
			height: 1em;
			border-radius: 50%;
			background: #fff;
			box-shadow: 0 0 .25em rgba(0, 0, 0, .3);
			transform: scale(.7);
			left: 0;
			transition: all .2s ease-in-out;
		}

		input[type="checkbox"].switch:checked::before {
			left: 1.5em;
		}
	}
</style>
